ツールチップ
ツールチップの構成
ツールチップ設定はoptions.tooltips
名前空間。グラフのツールチップのグローバル オプションは次のように定義されています。Chart.defaults.global.tooltips
。
名前 | タイプ | デフォルト | 説明 | |
---|---|---|---|---|
enabled |
boolean |
true |
キャンバス上のツールチップは有効になっていますか? | |
custom |
function |
null |
見るカスタムツールチップセクション。 | |
mode |
string |
'nearest' |
ツールチップに表示される要素を設定します。もっと...。 | |
intersect |
boolean |
true |
true の場合、ツールチップ モードはマウスの位置が要素と交差する場合にのみ適用されます。 false の場合、モードは常に適用されます。 | |
position |
string |
'average' |
ツールチップを配置するためのモード。もっと... | |
callbacks |
object |
を参照してください。コールバックセクション。 | ||
itemSort |
function |
ツールチップ項目を並べ替えます。もっと... | ||
filter |
function |
ツールチップ項目をフィルターします。もっと... | ||
backgroundColor |
Color |
'rgba(0, 0, 0, 0.8)' |
ツールチップの背景色。 | |
titleFontFamily |
string |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
タイトルのフォント。 | |
titleFontSize |
number |
12 |
タイトルのフォントサイズ。 | |
titleFontStyle |
string |
'bold' |
タイトルのフォントスタイル。 | |
titleFontColor |
Color |
'#fff' |
タイトルのフォントの色。 | |
titleAlign |
string |
'left' |
タイトルテキスト行の水平方向の配置。もっと... | |
titleSpacing |
number |
2 |
各タイトル行の上下に追加するスペース。 | |
titleMarginBottom |
number |
6 |
タイトルセクションの下部に追加するマージン。 | |
bodyFontFamily |
string |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
ボディラインのフォントです。 | |
bodyFontSize |
number |
12 |
本文のフォントサイズ。 | |
bodyFontStyle |
string |
'normal' |
本文のフォント スタイル。 | |
bodyFontColor |
Color |
'#fff' |
本体のフォントの色。 | |
bodyAlign |
string |
'left' |
本文テキスト行の水平方向の配置。もっと... | |
bodySpacing |
number |
2 |
各ツールチップ項目の上部と下部に追加する間隔。 | |
footerFontFamily |
string |
"'Helvetica Neue', 'Helvetica', 'Arial', sans-serif" |
フッターのフォント。 | |
footerFontSize |
number |
12 |
フッターのフォントサイズ。 | |
footerFontStyle |
string |
'bold' |
フッターのフォント スタイル。 | |
footerFontColor |
Color |
'#fff' |
フッターのフォントの色。 | |
footerAlign |
string |
'left' |
フッターテキスト行の水平方向の配置。もっと... | |
footerSpacing |
number |
2 |
各フッター行の上部と下部に追加するスペース。 | |
footerMarginTop |
number |
6 |
フッターを描画する前に追加するマージン。 | |
xPadding |
number |
6 |
ツールチップの左右に追加するパディング。 | |
yPadding |
number |
6 |
ツールチップの上部と下部に追加するパディング。 | |
caretPadding |
number |
2 |
ツールチップの矢印の端をツールチップの点から遠ざけるための追加の距離。 | |
caretSize |
number |
5 |
ツールチップの矢印のサイズ (ピクセル単位)。 | |
cornerRadius |
number |
6 |
ツールチップのコーナーカーブの半径。 | |
multiKeyBackground |
Color |
'#fff' |
ツールチップに複数の項目がある場合に、色付きボックスの後ろに描画する色。 | |
displayColors |
boolean |
true |
true の場合、ツールチップにカラー ボックスが表示されます。 | |
borderColor |
Color |
'rgba(0, 0, 0, 0)' |
境界線の色。 | |
borderWidth |
number |
0 |
境界線のサイズ。 | |
rtl |
boolean |
true 凡例を右から左にレンダリングします。 |
||
textDirection |
string |
キャンバスのデフォルト | これにより、テキストの方向 `'rtl' が強制されます。 | キャンバス上で指定された CSS に関係なく、ツールチップをレンダリングするためのキャンバス上の 'ltr` |
位置モード
可能なモードは次のとおりです。
'average'
'nearest'
'average'
モードでは、ツールチップに表示される項目の平均的な位置にツールチップが配置されます。'nearest'
イベント位置に最も近い要素の位置にツールチップを配置します。
新しいモードは、関数を追加することで定義できます。Chart.Tooltip.positioners
地図。
例:
/**
* Custom positioner
* @function Chart.Tooltip.positioners.custom
* @param elements {Chart.Element[]} the tooltip elements
* @param eventPosition {Point} the position of the event in canvas coordinates
* @returns {Point} the tooltip position
*/
Chart.Tooltip.positioners.custom = function(elements, eventPosition) {
/** @type {Chart.Tooltip} */
var tooltip = this;
/* ... */
return {
x: 0,
y: 0
};
};
位置合わせ
のtitleAlign
、bodyAlign
とfooterAlign
オプションは、ツールヒント ボックスに対するテキスト行の水平位置を定義します。次の値がサポートされています。
'left'
(デフォルト)'right'
'center'
これらのオプションはテキスト行にのみ適用されます。カラー ボックスは常に左端に揃えられます。
ソートコールバック
の並べ替えを可能にしますツールチップ項目。少なくとも渡すことができる関数を実装する必要があります配列.プロトタイプ.ソート。この関数は、チャートに渡されるデータ オブジェクトである 3 番目のパラメーターも受け入れることができます。
フィルターコールバック
フィルタリングを許可しますツールチップ項目。少なくとも渡すことができる関数を実装する必要があります配列.プロトタイプ.フィルター。この関数は、チャートに渡されるデータ オブジェクトである 2 番目のパラメーターも受け入れることができます。
ツールチップのコールバック
ツールチップのラベル構成は、ツールチップ構成の下にネストされています。callbacks
鍵。ツールチップには、テキストを提供するための次のコールバックがあります。すべての機能について、this
から作成されたツールチップ オブジェクトになります。Chart.Tooltip
コンストラクタ。
すべての関数は同じ引数で呼び出されます。ツールチップ項目そしてそのdata
チャートに渡されるオブジェクト。すべての関数は文字列または文字列の配列を返す必要があります。文字列の配列は複数行のテキストとして扱われます。
名前 | 引数 | 説明 |
---|---|---|
beforeTitle |
TooltipItem[], object |
タイトルの前にレンダリングするテキストを返します。 |
title |
TooltipItem[], object |
ツールヒントのタイトルとしてレンダリングするテキストを返します。 |
afterTitle |
TooltipItem[], object |
タイトルの後に表示するテキストを返します。 |
beforeBody |
TooltipItem[], object |
本文セクションの前にレンダリングするテキストを返します。 |
beforeLabel |
TooltipItem, object |
個々のラベルの前にレンダリングするテキストを返します。これは、ツールチップの項目ごとに呼び出されます。 |
label |
TooltipItem, object |
ツールチップ内の個々の項目に対してレンダリングするテキストを返します。もっと... |
labelColor |
TooltipItem, Chart |
ツールチップ項目をレンダリングする色を返します。もっと... |
labelTextColor |
TooltipItem, Chart |
ツールチップ項目のラベルのテキストの色を返します。 |
afterLabel |
TooltipItem, object |
個々のラベルの後にレンダリングするテキストを返します。 |
afterBody |
TooltipItem[], object |
本体セクションの後にレンダリングするテキストを返します。 |
beforeFooter |
TooltipItem[], object |
フッターセクションの前にレンダリングするテキストを返します。 |
footer |
TooltipItem[], object |
ツールヒントのフッターとしてレンダリングするテキストを返します。 |
afterFooter |
TooltipItem[], object |
フッターセクションの後にレンダリングするテキスト。 |
ラベルコールバック
のlabel
コールバックは、特定のデータ ポイントに対して表示されるテキストを変更できます。データ値を丸める一般的な例。次の例では、データを小数点第 2 位に四捨五入します。
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
callbacks: {
label: function(tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += Math.round(tooltipItem.yLabel * 100) / 100;
return label;
}
}
}
}
});
ラベルの色のコールバック
たとえば、ツールヒントの各項目に赤いボックスを返すには、次のようにします。
var chart = new Chart(ctx, {
type: 'line',
data: data,
options: {
tooltips: {
callbacks: {
labelColor: function(tooltipItem, chart) {
return {
borderColor: 'rgb(255, 0, 0)',
backgroundColor: 'rgb(255, 0, 0)'
};
},
labelTextColor: function(tooltipItem, chart) {
return '#543453';
}
}
}
}
});
ツールチップ項目インターフェイス
ツールチップ コールバックに渡されるツールチップ項目は、次のインターフェイスを実装します。
{
// Label for the tooltip
label: string,
// Value for the tooltip
value: string,
// X Value of the tooltip
// (deprecated) use `value` or `label` instead
xLabel: number | string,
// Y value of the tooltip
// (deprecated) use `value` or `label` instead
yLabel: number | string,
// Index of the dataset the item comes from
datasetIndex: number,
// Index of this data item in the dataset
index: number,
// X position of matching point
x: number,
// Y position of matching point
y: number
}
外部 (カスタム) ツールチップ
カスタム ツールチップを使用すると、ツールチップのレンダリング プロセスにフックして、独自のカスタム方法でツールチップをレンダリングできます。通常、これはキャンバス上のツールチップの代わりに HTML ツールチップを作成するために使用されます。次のように、グローバルまたはチャート設定でカスタム ツールチップを有効にすることができます。
var myPieChart = new Chart(ctx, {
type: 'pie',
data: data,
options: {
tooltips: {
// Disable the on-canvas tooltip
enabled: false,
custom: function(tooltipModel) {
// Tooltip Element
var tooltipEl = document.getElementById('chartjs-tooltip');
// Create element on first render
if (!tooltipEl) {
tooltipEl = document.createElement('div');
tooltipEl.id = 'chartjs-tooltip';
tooltipEl.innerHTML = '<table></table>';
document.body.appendChild(tooltipEl);
}
// Hide if no tooltip
if (tooltipModel.opacity === 0) {
tooltipEl.style.opacity = 0;
return;
}
// Set caret Position
tooltipEl.classList.remove('above', 'below', 'no-transform');
if (tooltipModel.yAlign) {
tooltipEl.classList.add(tooltipModel.yAlign);
} else {
tooltipEl.classList.add('no-transform');
}
function getBody(bodyItem) {
return bodyItem.lines;
}
// Set Text
if (tooltipModel.body) {
var titleLines = tooltipModel.title || [];
var bodyLines = tooltipModel.body.map(getBody);
var innerHtml = '<thead>';
titleLines.forEach(function(title) {
innerHtml += '<tr><th>' + title + '</th></tr>';
});
innerHtml += '</thead><tbody>';
bodyLines.forEach(function(body, i) {
var colors = tooltipModel.labelColors[i];
var style = 'background:' + colors.backgroundColor;
style += '; border-color:' + colors.borderColor;
style += '; border-width: 2px';
var span = '<span style="' + style + '"></span>';
innerHtml += '<tr><td>' + span + body + '</td></tr>';
});
innerHtml += '</tbody>';
var tableRoot = tooltipEl.querySelector('table');
tableRoot.innerHTML = innerHtml;
}
// `this` will be the overall tooltip
var position = this._chart.canvas.getBoundingClientRect();
// Display, position, and set styles for font
tooltipEl.style.opacity = 1;
tooltipEl.style.position = 'absolute';
tooltipEl.style.left = position.left + window.pageXOffset + tooltipModel.caretX + 'px';
tooltipEl.style.top = position.top + window.pageYOffset + tooltipModel.caretY + 'px';
tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';
tooltipEl.style.pointerEvents = 'none';
}
}
}
});
見るサンプルカスタム ツールチップの使用を開始する方法の例を参照してください。
ツールチップモデル
ツールチップ モデルには、ツールチップのレンダリングに使用できるパラメータが含まれています。
{
// The items that we are rendering in the tooltip. See Tooltip Item Interface section
dataPoints: TooltipItem[],
// Positioning
xPadding: number,
yPadding: number,
xAlign: string,
yAlign: string,
// X and Y properties are the top left of the tooltip
x: number,
y: number,
width: number,
height: number,
// Where the tooltip points to
caretX: number,
caretY: number,
// Body
// The body lines that need to be rendered
// Each object contains 3 parameters
// before: string[] // lines of text before the line with the color square
// lines: string[], // lines of text to render as the main item with color square
// after: string[], // lines of text to render after the main lines
body: object[],
// lines of text that appear after the title but before the body
beforeBody: string[],
// line of text that appear after the body and before the footer
afterBody: string[],
bodyFontColor: Color,
_bodyFontFamily: string,
_bodyFontStyle: string,
_bodyAlign: string,
bodyFontSize: number,
bodySpacing: number,
// Title
// lines of text that form the title
title: string[],
titleFontColor: Color,
_titleFontFamily: string,
_titleFontStyle: string,
titleFontSize: number,
_titleAlign: string,
titleSpacing: number,
titleMarginBottom: number,
// Footer
// lines of text that form the footer
footer: string[],
footerFontColor: Color,
_footerFontFamily: string,
_footerFontStyle: string,
footerFontSize: number,
_footerAlign: string,
footerSpacing: number,
footerMarginTop: number,
// Appearance
caretSize: number,
caretPadding: number,
cornerRadius: number,
backgroundColor: Color,
// colors to render for each item in body[]. This is the color of the squares in the tooltip
labelColors: Color[],
labelTextColors: Color[],
// 0 opacity is a hidden tooltip
opacity: number,
legendColorBackground: Color,
displayColors: boolean,
borderColor: Color,
borderWidth: number
}